
<div *ngIf="form != null" class="card" [ngClass]="{'is-expanded': isExpanded}">
    <form [formGroup]="form">
        <div class="flex justify-content-between flex-column md:align-items-center md:flex-row mb-3">
            <h2 class="mb-0 h-3rem">
                Realtime Logs
            </h2>

            <nav class="flex gap-3 w-full md:w-6">
                <span class="w-full p-input-icon-left">
                    <i class="pi pi-filter"></i>
                    <input
                        pInputText
                        type="text"
                        class="w-full"
                        autocomplete="off"
                        placeholder="Case-sensitive filter"
                        id="filter"
                        formControlName="filter"/>
                </span>
                <p-button
                    pp-button
                    icon="pi pi-{{stopScroll ? 'play' : 'pause'}}"
                    (click)="stopScroll = !stopScroll"
                    pTooltip="{{stopScroll ? 'Start' : 'Stop'}} Scrolling"
                    tooltipPosition="left">
                </p-button>
                <p-button
                    pp-button
                    icon="pi pi-trash"
                    (click)="clearLogs()"
                    pTooltip="Clear Logs"
                    tooltipPosition="left">
                </p-button>
                <p-button
                    pp-button
                    icon="pi pi-window-{{isExpanded ? 'minimize' : 'maximize'}}"
                    (click)="isExpanded = !isExpanded"
                    pTooltip="{{isExpanded ? 'Minimize' : 'Maximize'}} Logs"
                    tooltipPosition="left">
                </p-button>
            </nav>
        </div>

        <div id="logs" #scrollContainer>
            <div *ngFor="let log of logs" [ngClass]="log.className">₿ {{log.text | ANSI}}</div>
        </div>
    </form>
</div>
